<template>
  <el-dialog
    class="form-dialog form-preview"
    v-model="visible"
    v-if="visible"
    modal-append-to-body
    append-to-body
    destroy-on-close
    width="1000px"
    z-index="1000"
  >
    <template #title>
      <el-radio-group v-model="active" size="mini">
        <el-radio-button label="pc">
          <i class="el-icon-monitor" />
        </el-radio-button>
        <el-radio-button label="phone">
          <i class="el-icon-mobile" />
        </el-radio-button>
      </el-radio-group>
      <!-- <el-button style="float:right" type="primary" @click="uploadImg">生成图片</el-button> -->
    </template>
    <template v-if="formList && formList.length">
      <div v-if="active=='pc'" ref="PCFormImg">
        <PCForm ref="PCForm" :formList="formList" :formConf="formConf" isPreview />
      </div>
      <div class="hu-form-phone" v-if="active=='phone'">
        <div class="hu-form-phone-cont">
          <PhoneForm :formList="formList" :formConf="formConf" />
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import PCForm from "../formComponents/pcForm.vue";
import PhoneForm from "../formComponents/phoneForm.vue";
import html2canvas from "html2canvas";
import { base64ToFile } from "../utils";
export default {
  components: {
    PCForm,
    PhoneForm,
  },
  data() {
    return {
      formList: [],
      formConf: {},
      visible: false,
      active: "pc",
    };
  },
  mounted() {},
  methods: {
    open(list, conf) {
      this.visible = true;
      this.formList = [];
      this.formConf = {};
      if (list) this.formList = this.$utils.deepClone(list);
      if (conf) this.formConf = this.$utils.deepClone(conf);
    },

    //点击上传按钮
    uploadImg() {
      html2canvas(this.$refs.PCFormImg, {
        allowTaint: true, //是否允许不同源的图片污染画布
        useCORS: true, //是否尝试使用 CORS 从服务器加载图片
        scale: 2, //用于渲染的比例，默认为浏览器设备像素比率。
      }).then((canvas) => {
        // canvas.toDataURL(type, encoderOptions) 是 JavaScript 中用于将 <canvas> 元素的内容转换为数据 URL 的方法
        // type：指定输出的图像类型，默认为 "image/png"。也可以是 "image/jpeg" 或 "image/webp" 等格式。
        // encoderOptions：用于指定图像编码质量或压缩级别的参数（取值范围为 0-1），仅适用于 "image/jpeg" 和 "image/webp" 格式。
        let imgBase64Url = canvas.toDataURL("image/jpeg", 1);
        console.log(imgBase64Url);
        // let imgFile = base64ToFile(imgBase64Url, "图片名称");
        // console.log("🚀 ~ canvasImg ~ imgFile:", imgFile);
      });
    },
  },
};
</script>

<style lang="scss" >
.form-preview {
  .el-dialog__header {
    text-align: center;
  }
}
.hu-form-phone {
  margin: -25px auto;
  height: calc(100% + 30px);
  aspect-ratio: 4/7;
  position: relative;

  background-image: url("../../../images/phone_bg.png");
  background-repeat: no-repeat;
  background-size: cover;

  .hu-form-phone-cont {
    z-index: 1;
    background: #fff;
    position: absolute;
    inset: 10% 18% 16%;
    overflow: auto;
  }
}
.pho-dialog {
  .el-dialog .el-dialog__body {
    overflow: hidden;
  }
}
</style>
